<template>
  <div>
    <vxe-modal
      :title="$t('common.action.detail', '详情')"
      v-model="show"
      :loading="loading"
      :mask="false"
      :lock-view="false"
      width="1024px"
      height="750px"
      destroy-on-close
      show-zoom
      remember
      resize
      show-footer
      show-confirm-button
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane label="general" :name="0">
          <el-descriptions
            ref="description"
            :column="24 / span"
            :border="true"
            :label-width="labelWidth"
          >
            <el-descriptions-item
              :label="$t('menu.admin.config.field.name', '名称')"
            >
              {{ formData.name }}
            </el-descriptions-item>

            <el-descriptions-item
              :label="$t('menu.admin.config.field.key', '配置标识')"
            >
              {{ formData.key }}
            </el-descriptions-item>

            <el-descriptions-item
              :label="$t('menu.admin.config.field.category', '分类')"
            >
              <ra-dict-label
                v-model="formData.category"
                code="config_category_options"
              ></ra-dict-label>
            </el-descriptions-item>

            <el-descriptions-item
              :label="$t('menu.admin.config.field.type', '表单类型')"
            >
              <ra-dict-label
                v-model="formData.type"
                code="config_form_options"
              ></ra-dict-label>
            </el-descriptions-item>

            <el-descriptions-item
              :label="$t('menu.admin.config.field.value', '配置值')"
            >
              {{ formData.value }}
            </el-descriptions-item>

            <el-descriptions-item
              :label="$t('menu.admin.config.field.config', '数据源')"
            >
              {{ formData.config }}
            </el-descriptions-item>

            <el-descriptions-item :label="$t('common.field.remark', '备注')">
              {{ formData.remark }}
            </el-descriptions-item>

            <el-descriptions-item :label="$t('common.field.sort', '排序')">
              {{ formData.sort }}
            </el-descriptions-item>

            <el-descriptions-item :label="$t('common.field.status', '状态')">
              <ra-dict-label
                v-model="formData.status"
                code="status_options"
              ></ra-dict-label>
            </el-descriptions-item>

            <el-descriptions-item
              :label="$t('common.field.create_time', '创建时间')"
            >
              <ra-view-date
                v-model="formData.create_time"
                format="YYYY-MM-DD HH:mm:ss"
              ></ra-view-date>
            </el-descriptions-item>

            <el-descriptions-item
              :label="$t('common.field.update_time', '更新时间')"
            >
              <ra-view-date
                v-model="formData.update_time"
                format="YYYY-MM-DD HH:mm:ss"
              ></ra-view-date>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>

      <el-empty
        v-if="!loading && !formData.id"
        :description="$t('common.message.info.empty', '暂无数据')"
        :image-size="100"
      />
    </vxe-modal>
  </div>
</template>
<script setup>
defineOptions({
  name: 'Detail',
  inheritAttrs: false,
});

// Props定义
const props = defineProps({
  api: {
    type: Object,
    required: true,
    validator: (value) => {
      return typeof value.detail === 'function';
    },
  },
  options: {
    type: Object,
    default: () => ({}),
  },
});

const loading = ref(false);
const show = ref(false);
const activeTab = ref(0);
const labelWidth = ref('120px');
const span = 24;

const initialFormData = {
  name: null,
  key: null,
  category: null,
  type: null,
  value: null,
  config: null,
  remark: null,
  sort: null,
  status: null,
};
const formData = reactive({ ...initialFormData });
const resetFormData = () => {
  Object.assign(formData, initialFormData);
};
const loadDetailData = async (id) => {
  if (!id) {
    return;
  }
  try {
    loading.value = true;
    const params = { id };
    const { data } = await props.api.detail(params);

    if (data) {
      Object.assign(formData, data);
    } else {
      ElMessage.warning('未找到相关数据');
      resetFormData();
    }
  } catch (error) {
    console.error('Error loading detail data:', error);
    ElMessage.error('载入失败');
    resetFormData();
  } finally {
    loading.value = false;
  }
};

defineExpose({
  async show(id) {
    if (id) {
      await loadDetailData(id);
      show.value = true;
    } else {
      console.warn('未选择任何数据');
      ElMessage.warning('未选择任何数据');
    }
  },
});
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
  display: none;
}
:deep(.el-tabs__content) {
  padding: 0 !important;
}
</style>
